<template>
  <div>
    <div>
      <!-- {{userItems}} -->
      <!-- {{JSON.parse(form).name}} -->
      <!-- {{discussList.length}} -->
      <!-- {{itemId.time}} -->
      <div class="title">
        <h1>评论
          <small>{{discussList.length}}</small>
          <small class="likes">赞{{total.total}}</small>
          <small class='timer'>时间 {{countdown}}</small>
        </h1>
      </div>
      <div class="content" v-for="(item,index) in discussList" :key="index">
        <div class="headshot">
          <i class="iconfont icon-pinglun toux"></i>
        </div>
        <div class="main">
          <div class="head">
            <div class="names">
              <div class="names-name">{{item.name}}</div>
              <div></div>
            </div>
            <div class="like">
              <span class="like-number">100</span>
              <i class="iconfont icon-good like-icon"></i>
            </div>
          </div>
          <div class="comment">
            <div class="comment-text">
              <!-- 在HTML页面中,CSS样式的属性名为background-image对应的style对象的属性名为? -->
              {{item.content}}
            </div>
          </div>
          <div class="reply">
            <div style="margin-top:15px;position:relative">
              <div class="reply-number">9776回复
                <i class="iconfont icon-arrow-right"></i>
              </div>
              <span class="reply-time">{{item.t}}</span>
              <div class="close">
                <i class="iconfont icon-close"></i>
              </div>
            </div>
          </div>
          <!-- <div class="divs"></div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import "@/static/image/iconfont.css"
import { timer } from '@/components/count-down/countDown.js'
export default {
  data () {
    return {
      // userItems: JSON.parse(this.form)
      countdown: '00:00',
      timee: null
    }
  },
  beforeDestroy () {
    clearInterval(this.timee)
  },
  methods: {
    ...mapActions('discuss', ['getDiscuss']),
    ...mapActions('login', ['postLogin', 'postStudy']),
    runTimer (minters) {
      let seconds = minters * 1
      // let r = this.styleList.map((i) => i.bdid)
      // console.log(this.styleList)
      if (this.form.id && this.$route.params.id) {
        if (this.styleList.includes(this.$route.params.id*1) == false) {
          // console.log(this.$route.params.id)
          this.timee = setInterval(async () => {
            if (seconds <= 0) {
              this.countdown = '00:00'
              clearInterval(this.timee)
              await this.postStudy({ uid: this.form.id })
              this.$toast('已设为已读', 1500, 70, 'icon-favorites')
            } else {
              this.countdown = timer(--seconds)
            }

          }, 1000);
        }
      }
    }
  },
  computed: {
    ...mapState('discuss', ['discussList', 'itemId']),
    ...mapState('login', ['form', 'total', 'styleList'])
  },
  async mounted () {
    // console.log(this.styleList)
    // console.log(this.styleList)
    // console.log(this.form)
    // console.log(this.$route.params.id)
    // console.log(this.itemId)
    // console.log(this.form)
    // this.postLogin()
    await this.getDiscuss(this.$route.params.id)
  },
  watch: {
    itemId (n, o) {
      // console.log(n)
      if (n.time) {
        this.runTimer(n.time)
      }
    }
  }
}
</script>

<style scoped>
.divs {
  height: 5px;
  border-bottom: 1px solid #ccc;
  transform: scaleY(0.5);
}

.title {
  padding: 10px;
}

.content {
  display: flex;
  flex-flow: row;
}

.headshot {
  width: 50px;
  padding: 10px;
}

.main {
  flex: 1;
  padding: 10px;
}

.toux {
  font-size: 50px;
}

.head {
  position: relative;
  height: 30px;
}

.names {
  position: absolute;
}

.like {
  position: absolute;
  right: 0;
}

.names-name {
  font-size: 20px;
  font-weight: bolder;
}

.like-number {
  font-size: 17px;
  font-weight: 600;
}

.like-icon {
  font-size: 20px;
  padding-left: 3px;
}

.comment {
  padding-top: 15px;
}

.comment-text {
  font-size: 20px;
  display: -webkit-box;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.reply {
  position: relative;
}

.reply-number {
  display: inline-block;
  width: 80px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: #ccc;
  border-radius: 100px;
  font-size: 13px;
}

.reply-time {
  color: #ccc;
  margin-left: 18px;
}

.close {
  position: absolute;
  display: inline-table;
  right: 0;
  top: 3px;
}

.close i {
  font-size: 20px;
}

.timer {
  font-weight: normal;
  float: right;
  font-size: 16px;
  padding-right: 28px;
}

.likes {
  font-size: 16px;
  float: right;
  font-weight: normal;
}
</style>